let Utils = require("../../framework/js/utils");

Vue.component("aui-radiogroup", {
    template: `
        <div class="radio aui-radiogroup">
            <label :class="{'checkbox-inline': inline}" v-for="radio in radios">
                <input type="radio" :name="radioname" @change="onChange" v-model="radiovalue" 
                    :checked="radio.value == value" :value="radio.value">
                <span v-html="radio.label"></span>
            </label>           
        </div>
    `,
    props: {
        value: {
            required: true
        },
        inline: {
            type: Boolean,
            default: true
        }
    },
    data() {
        var ret = {};
        ret.radios = [];
        ret.radioname = Utils.uniqueSelector("radio_");
        ret.radiovalue = 0;
        return ret;
    },
    mounted() {
        var self = this;
        self.$watch("value", function (newval, olval) {
            self.setValue(newval);
        });
    },
    methods: {
        setData(enums) {
            var self = this;
            self.radios = enums;
        },
        onChange() {
            var self = this;
            self.$emit("input", self.radiovalue);
        },
        setValue(value) {
            var self = this;
            self.radiovalue = value;
            self.$emit("input", self.radiovalue);
        },
        reset() {
            var self = this;
            self.radiovalue = 0;
        }
    }
});